<template>
  <div class="">
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="panel one">
          <img src="@/assets/data-overview/data-group-1.png" />
          <div class="context">
            <p>应用总数</p>
            <div>{{ data.appNum??= 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="panel two">
          <img src="@/assets/data-overview/data-group-2.png" />
          <div class="context">
            <p>新增应用数</p>
            <div>{{ data.appIncreaseNum??=0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="panel three">
          <img src="@/assets/data-overview/data-group-3.png" />
          <div class="context">
            <p>提供服务最多</p>
            <div class="content" :title="data.supplyMaxServiceAppName??='-'">
              <b>{{ data.supplyMaxServiceAppName??='-' }}</b>
              <span>提供服务：{{ data.supplyMaxServiceAppNum??=0 }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="panel four">
          <img src="@/assets/data-overview/data-group-4.png" />
          <div class="context">
            <p>提供事件最多</p>
            <div class="content" :title="data.supplyMaxEvtAppName??='-'">
              <b>{{ data.supplyMaxEvtAppName??='-'}}</b>
              <span>提供事件：{{ data.supplyMaxEvtAppNum??=0 }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, watch, computed, ref, onMounted } from "vue";


import AppAutoSelect from "@/components/AppAutoSelect/";
import { getAppCount } from '@/api/statistics';

export default defineComponent({
  name: "DataGroup",
  emits: ["update:modelValue", "update-list"],
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => { },
    },
    // create 新增， update 修改
    type: {
      type: String,
      default: "create",
    },
    time: { // 时间
      type: Object,
      default: () => { },
    },
    code: { // 地区code
      type: String,
      default: ''
    },
  },
  components: { AppAutoSelect },
  setup(props, { emit }) {
    watch(() => props.time, (val) => {
      init()
    })
    watch(() => props.code, (val) => {
      init()
    })
    const data = ref({
      appIncreaseNum: null,
      appNum: null,
      supplyMaxEvtAppName: null,
      supplyMaxEvtAppNum: null,
      supplyMaxServiceAppName: null,
      supplyMaxServiceAppNum: null
    })
    const getData = async (startDate = null, endDate = null, areaCode = null) => {
      const para = {
        areaCode,
        endDate,
        startDate
      }
      const res = await getAppCount(para)
      if (res.status == 200) {
        data.value = res.data
      } else {
        data.value = Object.keys(data.value).forEach(key => (data.value[key] = null))
      }
    }
    const init = () => {
      const start = props.time?.startDate
      const end = props.time?.endDate
      getData(start, end, props.code)
    }
    onMounted(() => {
      init()
    })
    return {
      data
    };
  },
});
</script>

<style lang="scss" scoped>
.panel {
  display: flex;
  justify-items: center;
  padding: 20px 14px;

  img {
    width: 48px;
    height: 48px;
  }

  height: 90px;
  background: #F6F9FF;
  border-radius: 8px;

  .context {
    width: calc(100% - 48px);
    padding-left: 20px;
    color: #3C475D;

    p {
      font-size: 13px;
      font-weight: 400;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    div {
      font-size: 20px;
      font-weight: 600;
      position: relative;

      &.content {
        padding-right: 100px;
      }

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        position: absolute;
        right: 0;
        bottom: 5px;
        font-size: 13px;
        font-weight: 400;
        color: #858C99;
      }

      b {
        font-size: 18px;
      }
    }
  }

  &.two {
    background: #F2FBFF;
  }

  &.three {
    background: #FFFAF4;
  }

  &.four {
    background: #F1FBF9;
  }
}
</style>
